import React,{Component} from "react";

import "./detailSongList.css"

import {getDetailList} from "../../api/index"

import {withRouter,Link} from "react-router-dom"

class DetailSongList extends Component {
    constructor(){
        super()
        this.state={
            info:[],
            userInfo:[],
            bg:{},
            tracks:[]
        }
    }
    
    componentDidMount(){
        console.log("-----------------------------------------------------------")
        console.log(this.props.location.state.item.id)
        this.props.getDetailSongList(this.props.location.state.item.id)
        getDetailList(this.props.location.state.item.id).then(res=>{
      
            if(res.data.code===200){
                // console.log(res.data.playlist.subscribers)
                console.log(res.data.playlist.tracks)
                this.setState({
                    info:res.data.playlist,
                    userInfo:res.data.playlist.creator,
                    bg:{
                            backgroundImage:'url('+ res.data.playlist.coverImgUrl +') no-repeat center center' 
                    },
                    tracks:res.data.playlist.tracks
                })
            }
        })
    }

    back(){
        this.props.history.go(-1)
       
    }

    render(){
        console.log(this.props.location.state)
        // console.log(this.state.)
        let {info,userInfo,bg,tracks} = this.state
        console.log(this.state.bg)
        return(
            <div className="detailSongList" style={{background:bg.backgroundImage,backgroundSize:"120%,120%"}}>
                <div className="detailHeader" style={{backgroundColor:"transparent"}}>
                    <div className="headerLeft">
                        <span className="iconfont back" onClick={this.back.bind(this)}>&#xe749;</span>
                    </div>
                    <div className="headerMain">
                         <span>歌单</span>
                    </div>
                    <div className="headerRight">
                      
                        <span className="iconfont right">&#xe7bc;</span>
                    </div>
                </div>

                <div className="detailConent">
                     <div className="detailConentTop">
                          <div className="detailImgWrap">
                                <img src={info.coverImgUrl} />
                          </div>
                          <div className="topContent">
                             <h2>{info.name}</h2>
                             <div className="authorInfo">
                                  <div className="authorImg">
                                      <img src={userInfo.avatarUrl} />
                                  </div>
                                  <div className="authorName">
                                     <span>{userInfo.nickname}</span>
                                  </div>
                             </div>
                             <div className="introduce">
                                <span className="introduceInner">
                                {this.state.info.description}</span>
                             </div>
                          </div>
                         
                     </div>
                     <div className="btn1">
                         <div className="first">
                                <span className="iconfont remark">&#xe610;</span>
                                <i>{info.commentCount}</i>
                         </div>
                         <div className="second">
                                <span className="iconfont share">&#xe621;</span>
                                <i>{info.shareCount}</i>
                         </div>
                         <div className="third">
                                <span className="iconfont download">&#xe730;</span>
                                <i>下载</i>
                         </div>
                         <div className="fouth">
                                <span className="iconfont allcheck">&#xe80d;</span>
                                <i>多选</i>
                         </div>
                     </div>
                </div>
                
                <div className="detailSong">
                        <div className="detailTitle">
                           <div className="titleLeft">
                                  <span className="iconfont broadCastAll">&#xe662;</span>
                                  <i>播放全部</i>
                                  <i>(共{info.trackCount}首)</i>
                           </div>
                           <div className="titleRight">
                         
                           <span className="iconfont addIcon">  &#xe62e;</span>
                           <u>收藏({info.subscribedCount})</u>
                           </div>
                        </div>
                        <div className="detailSongMain">

                             {tracks.map((item,index)=>{
                                 return(
                                    <Link to={{pathname:"/BroadCast",state:item}}key={item.id}> 
                                        <i>{index+1}</i>
                                    
                                        <div className="info">
                                            <h2>{item.name}</h2>
                                            <div className="infoInner">
                                                <div className="name">{item.ar[0].name}</div>
                                                <span>&nbsp;</span>
                                                <div className="songName">{item.name}</div>
                                            </div>
                                        </div>
                                        <div className="detailSongRight">
                                        <span className="iconfont BroadCastIcon">&#xe662;</span>
                                        </div>
                                    </Link>
                                 )
                             })}
                               
                        </div>
                </div>

            </div>
        )
    }
}

export default withRouter(DetailSongList)
